<!-- 公共文件 start -->
@extends('admin.public.base')
<!-- 公共文件 end -->

@section('content')
<style>
    .layui-card-body {
        overflow-y: scroll;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>用户名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_username" name="username" required="" lay-verify="username" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_pass" class="layui-form-label">
                    <span class="x-red">*</span>密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_pass" name="pass" required="" lay-verify="pass" autocomplete="off" class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">密码必须为“6~20位的字符”</div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                    <span class="x-red">*</span>确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_repass" name="repass" required="" lay-verify="repass" autocomplete="off" class="layui-input"></div>
            </div>
            <div class="layui-inline layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <select name="role_id" lay-verify="required">
                        @foreach($role_list as $item)
                        <option value="{{ $item['id'] }}">{{ $item['name'] }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_mobile" class="layui-form-label">
                    <span class="x-red">*</span>手机号
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_mobile" name="mobile" required="" lay-verify="mobile" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">增加</button></div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer', 'jquery'], function() {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            username: function(value) {
                if (value.length < 6 || value.length > 16) {
                    // return '用户名必须为6到16的字符';
                }
            },
            mobile: [/1[3456789]\d{9}$/, '请输入正确的手机号'],
            pass: [/(.+){6,16}$/, '密码必须6到16位'],
            repass: function(value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function(data) {
            console.log(data);
            //发异步，把数据提交给php
            $.ajax({
                type: 'POST',
                url: '/admin/admin/userAdd',
                data: {
                    username: data.field.username,
                    mobile: data.field.mobile,
                    role_id: data.field.role_id,
                    password: data.field.pass
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                },
                success: function(data) {
                    // console.log(data);
                    if (data.code == 1) {
                        layer.alert("增加成功", {
                                icon: 6
                            },
                            function() {
                                //关闭当前frame
                                xadmin.close();

                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            });
                    } else {
                        layer.alert(data.msg)
                    }
                },
                error: function(xhr, type) {
                    alert('Ajax error!')
                }
            });

            return false;
        });

    });
</script>
<script>
    layui.use('laydate',
        function() {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start', //指定元素
                type: 'datetime'
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end', //指定元素
                type: 'datetime'
            });
        });
</script>

@endsection